<template>
  <div class="top">
    <div class="left">
      <span>订单提交成功，请尽快付款！订单号:</span>
      <b style="color: red"></b>
    </div>
    <div class="total_fee">
      应付金额
      <b style="color: red; font-size: 20px"></b>
      元
    </div>
  </div>
  <div class="payment">
    <div class="title">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-wechat_pay"></use>
      </svg>
      <b>微信支付</b>
      <span>请使用微信扫码支付</span>
    </div>
    <div class="main">
      <div class="left">
        <div class="qrcode" v-loading="loading">
          <!-- 展示二维码的地方 -->
          <img :src="qrUrl" width="300" height="300" alt="" />
          <div class="pw-box-ft">
            <div class="svg">
              <svg class="icon">
                <use xlink:href="#icon-weixin1"></use>
              </svg>
            </div>
            <div class="qr-right">
              <p>请使用微信扫一扫</p>
              <p>扫描二维码支付</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="../../../../assets/1.jpg" alt="" style="margin-top: 10px" />
      </div>
    </div>
    <el-descriptions title="订单信息">
      <el-descriptions-item label="创建时间:">
        {{ userInfo?.create_time }}
      </el-descriptions-item>
      <el-descriptions-item label="用户名:">
        {{ userInfo?.user_nickname }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号:">
        {{ userInfo?.user_phone }}
      </el-descriptions-item>
      <el-descriptions-item label="产品名称:">
        {{ orderDetail?.productName }}
      </el-descriptions-item>
      <el-descriptions-item label="产品描述:">
        {{ orderDetail?.description }}
      </el-descriptions-item>
      <el-descriptions-item label="总价格:">
        <span style="color: red; font-size: 30px">
          {{ userInfo?.total_fee }}
        </span>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import * as api from '../../../../api/vip';
import { ref, watch, onUnmounted } from 'vue';
//引入将支付地址生成二维码的插件
import qrcode from 'qrcode';
//先获取携带过来的参数
let route = useRoute();
let router = useRouter();
// 获取携带过来的id
let order_id = route.query.order_id;
//声明变量存储二维码路径
let orderDetail = ref();
//声明变量存储用户信息
let userInfo = ref();
//用于声明动画
let loading = ref(true);
// 查询当前用户订单信息
let getUserApi = async () => {
  try {
    let res = await api.getOrderApi(order_id);
    orderDetail.value = res.data.data.orderDetail[0];
    userInfo.value = res.data.data;
    loading.value = false;
    //如果订单的状态不是1,就要回到充值页面
    if (res.data.data.order_status !== 1) {
      //重新跳转到订单页
      router.push('paySuccess');
    }
  } catch (e) {}
};
getUserApi();

//用来保存二维码地址的变量
let qrUrl = ref();
//发起支付请求
//侦听数据的变化
watch(userInfo, async () => {
  try {
    // 获取存储的二维码 判断
    let getqr = localStorage.getItem(order_id);
    if (getqr) {
      qrUrl.value = getqr;
      return;
    }

    let res = await api.sendPayment(order_id);

    let code_url = res.data.code_url;
    // console.log(code_url);
    qrcode.toDataURL(code_url, (err, url) => {
      // console.log(url); //二维码图片的地址
      qrUrl.value = url;
      //在重新支付页面需要用到id跟二维码 先保存
      localStorage.setItem(order_id, url);
    });
  } catch (e) {}
});

let timer = null;
//轮询请求查询支付结果
let polling = () => {
  timer = setInterval(async () => {
    try {
      let res = await api.QueryOrderStatusApi(order_id);
      console.log(res);
      //根据轮询的状态,判断是否支付
      let { status } = res.data;
      //3005的状态是可支付的
      if (status !== 3005 && !status !== 200) {
        router.push('paySuccess');
      } else if (status == 200) {
        //支付成功,清掉二维码
        localStorage.removeItem(order_id);
        router.push('paySuccess');
      }
    } catch (e) {}
  }, 3000);
};
polling();

onUnmounted(() => {
  clearInterval(timer);
});
</script>
<style scoped lang="scss">
.payment {
  background-color: #fff;
  padding: 5px 30px;
  box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
}

.main {
  display: flex;
  justify-content: center;
}

.top {
  padding: 5px 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;

  .total_fee {
    margin-top: 10px;
  }
}

.title {
  margin: 10px 20px;

  b {
    font-size: 30px;
    display: inline-block;
    margin-right: 135px;
  }

  :deep(.icon) {
    vertical-align: text-bottom;
    width: 2em;
    height: 2em;
    margin-right: 10px;
  }
}

.pw-box-ft {
  height: 44px;
  padding: 8px 0 8px;
  background-image: linear-gradient(135deg, #4c67ff, #5635df);
  display: flex;

  justify-content: space-evenly;

  .qr-right {
    p {
      margin: 0;
      font-size: 14px;
      line-height: 22px;
      color: #fff;
      font-weight: 700;
    }
  }

  .icon {
    width: 3em;
    height: 3em;
  }
}

.right {
  width: 379px;
  height: 421px;
  padding-left: 50px;
  margin-top: -20px;
  background: url('../../../../assets/1.jpg') 50px 0 no-repeat;
}
</style>
